<template>
	<view class="xzfx-source-goods-list">
		<view class="xzfx-source-goods-item" v-for="(item,index) in list" :key="index" @click.stop="$go('/pages/source-goods/details?id=' + item.id)">
			<view class="top">
				<view>
					<text style="color: #999;padding-right: 10rpx;">[货主]</text>{{ item.sendContackName || "-" }}
				</view>
				<view class="send-time">{{ item.createTime }}</view>
			</view>
			<view class="address">
				<view class="address-info">
					<view><text class="xzfx_icon_qidian" style="color: #4cd964;"></text>{{ item.sendLocation }}</view>
					<view><text class="xzfx_icon_zhongdian" style="color: #f0ad4e;"></text>{{ item.receiveLocation }}</view>
				</view>
				<view class="address-distance">
					<view>约{{ item.totalDistance }}公里</view>
					<view>约{{ item.totalDuration }}分钟</view>
				</view>
			</view>
			<view class="body">
				<view class="info-item">
					<view class="label">货物信息:</view>
					<view class="value">
						{{ item.goodsType || '其他' }}
						<text>|</text>
						{{ item.goodsVolume || 0 }}m³
						<text>|</text>
						{{ item.goodsWeight || 0 }}kg
					</view>
				</view>
				<view class="info-item">
					<view class="label">所需车型:</view>
					<view class="value">{{ item.truckType || "-" }} {{ item.shareStatus || "-" }}</view>
				</view>
				<view class="info-item">
					<view class="label">发货时间:</view>
					<view class="value">{{ item.sendStartTime || "-" }}{{ item.sendEndTime ? " - " + item.sendEndTime : "" }}</view>
				</view>
				<view class="info-item">
					<view class="label">收货时间:</view>
					<view class="value">{{ item.receiveEndTime || "-" }}</view>
				</view>
			</view>
			<view class="bottom">
				<view class="price">
					<text style="padding-right: 10rpx;">净得运费:</text>
					{{ item.offerPrice || 0 }}
					<text>元</text>
				</view>
				<view class="btn" @click.stop="$go('/pages/source-goods/details?id=' + item.id)">立即抢单</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"xzfx-source-goods-list",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style scoped lang="scss">
	.xzfx-source-goods-list{
		.xzfx-source-goods-item{
			margin: $xzfx-spacing;
			background-color: #fff;
			padding: $xzfx-spacing;
			border-radius: 20rpx;
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f5f5f5;
				padding-bottom: 15rpx;
				
				.send-time{
					font-size: 28rpx;
					color: #666;
				}
			}
			.address{
				padding: 20rpx 0 0 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				.address-info{
					width: calc(100% - 210rpx);
					color: #333333;
					view{
						padding: 8rpx 0;
						text{
							font-size: 36rpx;
							margin-right: 6rpx;
						}
					}
				}
				.address-distance{
					width: 200rpx;
					text-align: right;
					color: $xzfx-theme;
				}
			}
			.body{
				background: linear-gradient(to right, #f1f4fa, #ffffff);
				border-radius: 10rpx;
				padding: 15rpx 20rpx;
				margin: 15rpx 0;
				.info-item{
					display: flex;
					font-size: 24rpx;
					padding: 5rpx 0;
					.label{
						width: 110rpx;
						color: #666666;
					}
					.value{
						width: calc(100% - 110rpx);
						display: flex;
						align-items: center;
						color: #333333;
						text{
							padding: 0 10rpx;
							font-size: 22rpx;
							color: #999999;
						}
					}
				}
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.price {
					// height: 46rpx;
					font-size: 34rpx;
					font-weight: bold;
					color: red;
					display: flex;
					align-items: center;
					
					text {
						font-size: 28rpx;
						margin-left: 5rpx;
						color: #444;
					}
				}
				.btn{
					display: flex;
					justify-content: center;
					align-items: center;
					height: 60rpx;
					border-radius: 30rpx;
					background: $xzfx-theme;
					color: #FFFFFF;
					font-size: 28rpx;
					padding: 0 30rpx;
					overflow: hidden;
				}
			}
		}
	}
</style>